<section class='dlg-display-options'>
<form app:submit='DlgDisplayOptions.submit()' name='form'>
<div class='modal-body'>
<button class='close' ng:click='$dismiss()' type='button'>&times;</button>
<div class='row'>
<div class='col-xs-6'>
<div class='row dlg-display-options__section'>
<div class='col-xs-12'>
<div class='dlg-display-options__section-label'>Show my names</div>
<md-checkbox class='md-primary' ng-model='DlgDisplayOptions.data.showMyNames.creeps'>Creeps</md-checkbox>
<md-checkbox class='md-primary' ng-model='DlgDisplayOptions.data.showMyNames.spawns'>Spawns</md-checkbox>
</div>
</div>
<div class='row dlg-display-options__section'>
<div class='col-xs-12'>
<div class='dlg-display-options__section-label'>Show hostile names</div>
<md-checkbox class='md-primary' ng-model='DlgDisplayOptions.data.showEnemyNames.creeps'>Creeps</md-checkbox>
<md-checkbox class='md-primary' ng-model='DlgDisplayOptions.data.showEnemyNames.spawns'>Spawns</md-checkbox>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<md-checkbox class='md-primary' ng-model='DlgDisplayOptions.data.showFlags'>Show flags</md-checkbox>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<md-checkbox class='md-primary dlg-display-options__nested' ng-disabled='!DlgDisplayOptions.data.showFlags' ng-model='DlgDisplayOptions.data.showFlagsNames'>Show flags names</md-checkbox>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<md-checkbox class='md-primary' ng-model='DlgDisplayOptions.data.showCreepSpeech'>Show creeps speech</md-checkbox>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<md-checkbox class='md-primary' ng-model='DlgDisplayOptions.data.showRoomVisual'>Show visuals</md-checkbox>
</div>
</div>
</div>
<div class='col-xs-6'>
<div>
<div class='row'>
<div class='col-xs-12'>
<md-checkbox class='md-primary' ng-disabled='!DlgDisplayOptions.isWebGLSupported' ng-model='DlgDisplayOptions.data.renderer.pixi.webgl'>
Hardware acceleration (WebGL)
<span class='dlg-display-options__webgl-na' ng-if='!DlgDisplayOptions.isWebGLSupported'>(not available)</span>
</md-checkbox>
</div>
</div>
<div class='row' ng-if='DlgDisplayOptions.showHd'>
<div class='col-xs-12'>
<label>HD resolution:</label>
<ui-drop-select btn-class='md-raised' ng:model='DlgDisplayOptions.data.renderer.pixi.hd' options="[{native: 'Native (quality)'}, {upscaling: 'Upscaling (performance)'}]" style-type='md-button'></ui-drop-select>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<label>Lighting:</label>
<ui-drop-select btn-class='md-raised' disabled='!DlgDisplayOptions.data.renderer.pixi.webgl' ng:model='DlgDisplayOptions.data.renderer.pixi.lighting' options="[{normal: 'Normal'}, {low: 'Low'}, {disabled: 'Disabled'}]" style-type='md-button'></ui-drop-select>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<label>Swamp texture:</label>
<ui-drop-select btn-class='md-raised' disabled='!DlgDisplayOptions.data.renderer.pixi.webgl' ng:model='DlgDisplayOptions.data.renderer.pixi.swampTexture' options="[{animated: 'Animated'}, {static: 'Static'}, {disabled: 'Disabled'}]" style-type='md-button'></ui-drop-select>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<md-checkbox class='md-primary' ng-model='DlgDisplayOptions.data.renderer.pixi.metrics'>Show metrics</md-checkbox>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='modal-footer'>
<md:button ng:click='$dismiss()' type='button'>Cancel</md:button>
<md:button app:submit-animated class='md-raised md-primary' ng:disabled='form.$invalid' type='submit'>OK</md:button>
</div>
</form>
</section>
